---
name: useFullscreen
route: /useFullscreen
menu: 'Other'
edit: false
sidebar: true
---

import JackBox from 'jackbox';

import Demo1 from './demo/demo1';
import Demo1Tsx from '!raw-loader!./demo/demo1.tsx';
import Demo1Jsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2Tsx from '!raw-loader!./demo/demo2.tsx';
import Demo2Jsx from '!raw-loader!./demo/demo2.jsx';


# useFullscreen

A Hook for handling dom full screen

## Examples

### Default usage

<JackBox tsCode={Demo1Tsx} jsCode={Demo1Jsx} demoName='Default usage' description='Use ref to set elements that need full screen'>
  <Demo1 />
</JackBox>

<JackBox tsCode={Demo2Tsx} jsCode={Demo2Jsx} demoName='Lazy load' description='Pass in a function that returns the DOM element'>
  <Demo2 />
</JackBox>

## API

```
const {
   isFullscreen,
   setFull,
   exitFull,
   ref?,
} = useFullScreen({
  dom?,
  onExitFull?,
  onFull?,
});
```

### Result

| Property | Description                                         | Type                 |
|----------|------------------------------------------|------------|
| isFullscreen  | is full screen                          | boolean    |
| setFull  | set full screen | ()=>void    |
| exitFull  | exit full screen                          | ()=>void    |
| toggleFull  | toggle full screen                          | ()=>void    |
| ref     | when no dom is passed, the ref is bound to the node that needs to be full screen      | -        |

### Options

| Property | Description                                                        | Type                   | Default |
|---------|----------------------------------------------|------------------------|--------|
| dom | optional, if none is passed, this hook will subscibe to the ref that it returns  | HTMLElement \| (() => HTMLElement) \| undefined | -      |
| onExitFull | listen for exit full screen events  | ()=>void | -      |
| onFull | listen for full screen events  | ()=>void | -      |